<template>
	<view>
		<!-- <u-navbar title="选品区" :autoBack="true" v-if="totalNum > 0" :rightText="rightText"></u-navbar> -->
		<u-navbar title="购物车" :autoBack="true"></u-navbar>

		<!-- 空白页  没有任何数据情况下显示 -->
		<view class="" style="padding-top: 35px;">
			
			<view class="">
				<view class="empty" v-if="totalNum <= 0">
					<image src="/static/img/cate/empty_cart.png" mode="aspectFit"
						style="width: 286upx;height:291upx;margin:0 auto;"></image>
					<view class="" style="color:#a7aaaa;font-size: 28upx;padding-top: 52upx;padding-bottom: 45upx;">
						暂无商品
					</view>
					<view class="empty-go" @tap="goCate">
						<view class="navigator">去逛逛>></view>
					</view>
				</view>

				<view v-else style="padding: 30rpx;margin-top: 30rpx;padding-top: 10rpx;">
					<view class="card" v-for="(litem,lindex) in cartList" :key="lindex">
						<!-- <view class="card_top">
							<view style="display: flex;align-items: center;">
								<image
									:src="item.checked == true?'/static/img/httpindex/selected.png':'/static/img/httpindex/no_selected.png'"
									mode="widthFix" style="width: 40rpx;height: 40rpx;margin: auto 15upx;"
									@click="check('item', index)" />
								<view>
									华天贝馆
								</view> -->
						<!-- <image style="width: 22rpx;height: 26rpx;margin-left: 20rpx;"
									src="/static/img/httpindex/goods/youjian.png" mode=""></image> -->
						<!-- </view> -->
						<!-- <view style="font-size: 24rpx;color: #999;">完成</view> -->
						<!-- </view> -->
						<view class="card_main">
							<view class="card_main_box">
								<view class="">
									<image
										:src="litem.checked == true?'/static/img/cate/Selected.png':'/static/img/cate/no_selected.png'"
										mode="widthFix" style="width: 42rpx;height: 42rpx;margin: auto 15upx;"
										@click="check('item', lindex)" />
								</view>
								<image :src="litem.goods_ico"
									style="width:180rpx;height: 180rpx;border-radius: 12rpx;margin-right: 16rpx;"
									mode="" />
								<view style="width: calc(100% - 196rpx);">
									<view class="card_main_box_title">{{litem.goods_name}}</view>
									<!-- <view class="card_main_box_center" v-if="!!litem.goods_introduct">
										{{litem.goods_introduct}}
									</view> -->
									<view class="card_main_box_bottom">
										<view style="font-size: 24rpx;color: rgb(245, 84, 56);">
										<text style="font-size: 24rpx;zoom: 0.8;color: #999;width: 70rpx;">价格</text>
										<text>{{litem.price}}</text>
										</view>

										<view style="zoom: .7;">
											<!-- <u-number-box :disabledInput='true' @change="changeNum(value)"
												v-model="litem.number" buttonSize="26">
											</u-number-box> -->
											<uni-number-box v-model="litem.number" :min="1"
												@change="changeNum"></uni-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				<view class="" style="height: 40px;">

				</view>
				
				<view class="bottom_price" v-if="totalNum > 0">
					<view class="parice_left">
						<view class="bottom_allSel" @click="check('all')">
							<image :src="allChecked == true?'/static/img/cate/Selected.png':'/static/img/cate/no_selected.png'"
								style="width: 34rpx;height: 34rpx;margin-right: 12rpx;"></image>
							<view style="font-size: 28rpx;margin-right: 30rpx;">全选</view>
						</view>
				
						<view class="" v-if="!isedit" style="display: flex;align-items: center;">
							<view style="">合计：</view>
							<view style="color: #FF0000;">{{total}}</view>
						</view>
				
					</view>
					<view class="pay_btn" v-if="!isedit" @click="createOrder">
						去结算
					</view>
						
					<!-- <view class="del_btn" v-if="isedit" @click="clearCart">
						删除
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				totalNum: 0, //商品总数
				total: 0.00,
				totalCount: 0,
				allchecked: false,
				checked: false,
				rightText: '编辑',
				currentIndex: 0,
				isedit: false,
				cartList: [],
				dataObj: {},
				cates: [],
				cateInfo: {},
				price: {}
			}
		},
		onLoad() {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			let dataObj = {
				token: uni.getStorageSync('token')
			}
			this.dataObj = dataObj
			this.loadData();

			uni.$on('changeCartList', () => {
				this.loadData()
			});
		},
		onPullDownRefresh() {
			this.cartList = [];
			this.loadData('refresh');
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			async loadData(type = 'add') {
				if (type == 'add') {
					uni.showLoading({
						title: '加载中...'
					})
				}
				let res = await this.$myRequest({
					url: '/cartList',
					data: this.dataObj,
					methods: 'POST'
				})

				this.totalNum = res.data.data.length;

				let cartList = res.data.data.map(item => {
					item.checked = false;
					return item;
				});
				// console.log(this.totalNum)
				// console.log(res.data.data)
		
				this.cartList = cartList;
				console.log(cartList)
				// this.cateInfo = this.cartList[this.currentIndex].cateInfo;
				// this.price = this.cartList[this.currentIndex].price;
				// this.calcTotal(); //计算总
				// console.log(this.allchecked)
				if (type == 'add') {
					uni.hideLoading();
				} else {
					uni.stopPullDownRefresh()
				}
			},

			switchTabs(e) {
				let index = e.index;
				this.currentIndex = index;
				this.cateInfo = this.cartList[this.currentIndex].cateInfo;
				this.price = this.cartList[this.currentIndex].price;
				// this.allChecked = false
				this.calcTotal()
			},

			//选中状态处理
			check(type, index) {
				if (type === 'item') {
					this.cartList[index].checked = !this.cartList[index].checked;

					let checked = true;
					this.allChecked = false;
					const list = this.cartList;

					list.forEach(item => {
						if (item.checked == false) {
							checked = false
						}
					})
					this.allChecked = checked;
				} else {
					const checked = this.allChecked == true ? false : true;
					const list = this.cartList;

					list.forEach(item => {
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.calcTotal();
			},

			//计算总价
			calcTotal() {
				let list = this.cartList;
				if (list.length === 0) {
					this.totalCount = 0;
					this.empty = true;
					return;
				}
				let total = 0.00;
				let number = 0;
				// let checked = true;
				list.forEach(item => {
					// console.log(item)
					if (item.checked === true) {
						number += parseInt(item.number);
						// console.log(item.number)
						total += parseFloat(item.price) * parseInt(item.number);
					}
				})
				// this.allChecked = checked;
				// console.log(number)
				this.totalCount = number;
				// // console.log(this.allChecked)
				this.total = Number(total.toFixed(2));
			},

			order() {
				uni.navigateTo({
					url: './order'
				})
			},
			allChecked() {
				this.allchecked = !this.allchecked
			},

			selectItem() {
				this.checked = !this.checked
			},

			switchFunc() {
				this.isedit = !this.isedit
				if (this.isedit == true) {
					this.rightText = "完成"
				} else {
					this.rightText = "编辑"
				}
			},
			changeNum() {
				// console.log(index)
				// let onumber = this.cartList[this.currentIndex]['lists'][index].number;
				// let nnumber = parseInt(onumber) + parseInt(num);
				// let nnumber = parseInt(onumber) + 1;
				// if (nnumber < 1) {
				// 	nnumber = 1
				// } else if (nnumber > 999) {
				// 	nnumber = 999
				// }

				// this.cartList[this.currentIndex]['lists'][index].number = nnumber;
				// console.log(onumber)
				// console.log(num)
				// console.log(nnumber)

				this.calcTotal();
			},

			goCate() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			//确定清空选品区
			async clearCart() {
				// let list = this.cartList;
				// let delData = [];
				// list.forEach(item => {
				// 	if (item.checked) {
				// 		delData.push(item.id)
				// 	}
				// })

				// if (delData.length == 0) {
				// 	this.$api.msg('请选择商品！');
				// 	return false;
				// }

				// let delDataStr = JSON.stringify(delData)
				// let res = await this.$myRequest({
				// 	url: '/clearCart',
				// 	data: {
				// 		token: uni.getStorageSync('token'),
				// 		ids: delDataStr
				// 	},
				// 	methods: 'POST'
				// })

				// this.$api.msg(res.data.msg)
				// this.loadData('refresh')
			},

			//创建订单
			async createOrder() {
				console.log(this.cartList)
				let list = this.cartList;
				let goodsData = [];
				list.forEach(item => {
					if (item.checked) {
						goodsData.push({
							// attr_val: item.attr_val,
							id: item.product_id,
							number: item.number
						})
					}
				})

				this.dataObj.data = JSON.stringify(goodsData)
				let type = this.cartList[this.currentIndex]['type'];
				this.dataObj.type = type;
				let res = await this.$myRequest({
					url: '/order',
					data: this.dataObj,
					methods: 'POST'
				})

				this.$api.msg('去创建订单');

				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/cart/order?tag=' + res.data.data
					})
				}, 1000)
			}
		}

	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.parice_left {
		font-size: 24rpx;
		color: #121212;
		display: flex;
		align-items: center;
	}

	.bottom_allSel {
		display: flex;
		align-items: center;

	}

	.pay_btn,
	.del_btn {
		color: #F6F6F6;
		font-size: 26rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 100px;
		display: flex;
		justify-content: center;
	}

	.pay_btn {
		background: linear-gradient(to right, #FF403C, #FF6C00);
	}

	.del_btn {
		background: rgba(0, 0, 0, .5);
	}

	.bottom_price {
		background: #fff;
		height: 100rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		position: fixed;
		/* #ifdef APP-PLUS */
		bottom: 0;
		/* #endif */
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tap_t {
		font-size: 26rpx;
		padding: 0 12rpx;
		background: #fff;
	}

	.u-navbar__content__right__text {
		/* color: #FF0000 ; */
		font-size: 20rpx;
	}

	.card {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.card_top {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		align-items: center;
	}

	.card_main {

		/* border-bottom: 1px solid rgb(218, 218, 218); */
	}

	.card_main_box {
		display: flex;
		align-items: center;
		// margin-top: 30rpx;
	}

	.card_main_box_center {
		min-width: 40%;
		max-width: 100%;
		padding: 6rpx;
		color: #999;
		background-color: #f6f6f6;
		font-size: 24rpx;
		border-radius: 8rpx;
		// text-align: center;
		// margin-bottom: 12rpx;
	}

	.card_main_box_title {
		height: 30px;
		line-height: 30px;
		font-size: 28rpx;
		overflow: hidden;
		// margin-bottom: 12rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		width: 100%;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.card_main_box_bottom {
		display: flex;
		justify-content: space-between;
		height: 22px;
		align-items: baseline;
	}

	.detail_c {
		padding: 10rpx 32rpx;
		font-size: 24rpx;
		border: 1px solid #000;
		border-radius: 100px;
		margin-left: 30rpx;
		margin-top: 24rpx;
	}

	.check_box {
		transform: scale(0.7);
		border-radius: 50%;
	}

	.check_box .uni-checkbox-input {
		border-radius: 50% !important;
	}

	.hover {
		opacity: 0.6;
	}

	.bottom-btn {
		color: white;
		// background-color: #29ad97;
		background-image: linear-gradient(#29ad97, #3ce487);
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		text-align: center;
		// padding: 10rpx;
	}

	.header-bg {
		color: white;
	}

	.bottom {
		background-color: white;
		height: 110rpx;
		border-top: 1rpx solid #eaeaea;
		position: fixed;
		/* #ifdef APP */
		bottom: 0upx;
		/* #endif */

		/* #ifdef H5 */
		bottom: 100upx;
		/* #endif */


		width: 90%;
		// z-index: 1000;
	}

	.bg {
		background-color: white;
		width: 710rpx;
		height: 100%;
		margin: 20rpx auto;
		border-radius: 20rpx;

		.bk {}

		.title {
			width: 300rpx;
			margin-top: 20rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 28rpx;
		}

		.Sold {
			margin: 10rpx 0;
			color: #999;
			font-size: 24rpx;
		}

		.price {
			color: #29ad97;
			font-size: 28rpx;
		}

		.incre {
			margin-top: 120rpx;
			// margin-right: 25rpx;
			height: 60rpx;

			.number {
				margin: 0 25rpx;
			}

		}
	}

	.ls2 {
		.center {
			margin: 350rpx 0 30rpx 260rpx;
		}

		.btn {
			color: white;
			background-color: #29ad97;
			margin: 0rpx auto;
			width: 320rpx;
			border-radius: 50rpx;
		}
	}


	.isAll {
		width: 100rpx;
		height: 100%;
		// background-image: linear-gradient(90deg, rgba(237, 201, 125, 1.0) 200rpx, rgba(198, 8, 8, 1.0)100rpx);
		background-color: #29ad97;
		color: white;
		// 
		margin: 10rpx 0;
		// margin-left: 180rpx;
	}

	// .isAll1,
	// .isAll2 {
	// 	width: 200rpx;
	// 	// padding: 20rpx;
	// 	height: 90rpx;
	// 	text-align: center;
	// 	line-height: 90rpx;
	// }

	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-go {
			width: 297upx;
			height: 84upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 42upx;
			font-size: 30upx;
			background-image: linear-gradient(rgba(237, 201, 125, 1.0), rgba(198, 8, 8, 1.0));
			color: #fff;
			letter-spacing: 2upx;
		}
	}
</style>